<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>当当网</title>
    <link rel="stylesheet" type="text/css" href="css/dangdang.css" />
    <link rel="shortcut icon" href="images/favicon.ico" />
</head>
<body>
      <!-- 返回顶部效果 -->
      <div class="returnTop" id="returnTop">
          <img src="images/returntop.png" id="rImg">
      </div>
    <!-- 头部 -->
    <div class="head">
        <!-- 头部最上面 -->
        <div class="headTop">
            <div class="headTop-1">
                <div class="hT-left" id="hTleft">送至：北京<img src="images/down1.png" id="img1"></div>
                <div class="hT-left-1" id="hTleft1">
                    <ul>
                        <li>北京</li>
                        <li>请环岛秦皇岛</li>
                        <li>北京</li>
                        <li>北京</li>
                        <li>内蒙古</li>
                        <li>北京</li>
                        <li>北京</li>
                        <li>北京</li>
                        <li>北京</li>
                        <li>北京</li>
                        <li>北京</li>
                        <li>北京</li>
                        <li>北京</li>
                        <li>内蒙古</li>
                        <li>北京</li>
                        <li>北京</li>
                        <li>北京</li>
                        <li>北京</li>
                        <li>北京</li>
                        <li>北京</li>
                        <li>北京</li>
                        <li>北京</li>
                        <li>北京</li>
                        <li>北京</li>
                        <li>内蒙古</li>
                        <li>北京</li>
                        <li>北京</li>
                        <li>北京</li>
                        <li>北京</li>
                        <li>北京</li>
                        <li>内蒙古</li>
                        <li>北京</li>
                        <li>北京</li>
                        <li>北京</li>
                    </ul>
                </div>
                <ul class="hT-right">
                    <li class="hT-li2">客户服务</li>
                    <li>企业采购</li>
                    <li>我要出书</li>
                    <li>小说投稿</li>
                    <li id="hTrli1">0元购物<img src="images/down1.png" id="img2"></li>
                    <li>我的当当</li>
                    <li>我的云书房</li>
                    <li>成为会员</li>
                    <li class="hT-li1">欢迎光临当当，请<a href="#">登录</a></li>
                </ul>
            </div>
            <!-- 0元购物下拉框 -->
            <div class="hTr-li1" id="hTr_li1">
                <ul>
                    <li>图书信息</li>
                    <li>图书信息</li>
                    <li>图书信息</li>
                    <li>图书信息</li>
                </ul>
            </div>
        </div>
        <!-- logo一行的大盒子 -->
        <div class="logo-line">
            <!-- logo -->
            <img class="logo" src="images/DDlogoNEW.gif">
            <!-- 搜索栏 -->
            <!-- 中间搜索栏 -->
            <div class="search">
                <from>
                <div class="search-1">
                    <input class="input" type="text">
                    <div class="input-1" id="input_1">
                        全部分类<img src="images/down2.png" id="img3">
                    </div>
                    <div class="input-yc" id="input_yc">
                        <ul>
                            <li>分类效果</li>
                            <li>分类效果</li>
                            <li>分类效果</li>
                            <li>分类效果</li>
                        </ul>
                    </div>
                    <input class="btn" type="image" src="images/button.png">
                </div>
                </from>
                 <!-- 搜索栏下列表 -->
                <div class="search-2">
                    <div class="search-rs">热搜：</div>
                    <ul class="search-ul">
                        <li>穿过地平线</li>
                        <li>我要去故宫</li>
                        <li>乖，摸摸头2.0</li>
                        <li>华文全球史</li>
                        <li>普京传</li>
                    </ul>
                    <div class="search2-right">高级搜索</div>
                </div>
            </div>
            <!-- 右侧购物车的两个盒子 -->
            <div class="search-right">
                <div class="shopping-car">
                    <img src="images/shopping.png"><h6>购物车 0</h6>
                </div>
                <div class="shopping-right">我的订单</div>
            </div>

        </div>
        <!-- logo行大盒子下边的大导航栏 -->
        <div class="head-bottom">
            <div class="nav">
                <ul class="nav-ul">
                    <li class="nav-li1">全部商品分类<img src="images/down.png"></li>
                    <li>图书</li>
                    <li>电子书</li>
                    <li>网络文学</li>
                    <li>服装</li>
                    <li>运动户外</li>
                    <li>孕婴童</li>
                    <li>家具用品</li>
                    <li>当当优品</li>
                    <li>食品</li>
                    <li>Apple</li>
                    <li>电器城</li>
                </ul>
            </div>
            <!-- 大导航栏下边一排小的导航 -->
            <div class="nav-bottom">
                <div class="nav-bottom-1">
                    <ul class="nb-ul">
                        <li>图书信息</li>
                        <li>图书</li>
                        <li>图书馆</li>
                        <li>图书信息</li>
                        <li>图书</li>
                        <li>图书馆</li>
                        <li>图书信息</li>
                        <li>图书</li>
                        <li>图书馆</li>
                        <li>图书信息</li>
                        <li>图书</li>
                        <li>图书馆</li>
                        <li>图书信息</li>
                        <li>图书</li>
                        <li>图书馆</li>
                        <li>图书信息</li>
                        <li>图书</li>
                        <li>图书馆</li>
                    </ul>
                </div>
            </div>
        </div>
    
    </div>
    <!-- 导航条下边的广告 -->
    <div class="inner">
        <img src="images/zzbd.jpg">
    </div>
    <!-- 主体上半部分 -->
    <div class="mainTop">
        <!-- 上半部分的左侧 -->
        <div class="mainTop-left">
            <div class="mTl-1">图书分类</div>
            <div class="mTpl">
                <div class="mTpl-1">
                    <a>特色书单</a><img src="images/right.png">
                </div>
                <div class="mTpl-1">
                    <a>电子书&nbsp;</a><a>网络文学&nbsp;</a><a>阅读器</a><img src="images/right.png">
                </div>
                <div class="mTpl-2">
                    <div class="mTpl-2-1">
                        <a>阅读器</a><img src="images/right.png">
                    </div>
                    <ul class="mTpl-2-2">
                        <li>阅读</li>
                        <li>阅读</li>
                        <li>阅读阅读</li>
                        <li>阅读</li>
                        <li>阅读</li>
                    </ul>
                </div>
                <div class="mTpl-1">
                    <a>电子书&nbsp;</a><a>网络文学&nbsp;</a><a>阅读器</a><img src="images/right.png">
                </div>
                <div class="mTpl-2">
                    <div class="mTpl-2-1">
                        <a>阅读器</a><img src="images/right.png">
                    </div>
                    <ul class="mTpl-2-2">
                        <li>阅读</li>
                        <li>阅读</li>
                        <li>阅读阅读</li>
                        <li>阅读</li>
                        <li>阅读</li>
                    </ul>
                </div>
                <div class="mTpl-2">
                    <div class="mTpl-2-1">
                        <a>阅读器</a><img src="images/right.png">
                    </div>
                    <ul class="mTpl-2-2">
                        <li>阅读</li>
                        <li>阅读</li>
                        <li>阅读阅读</li>
                        <li>阅读</li>
                        <li>阅读</li>
                    </ul>
                </div>
                <div class="mTpl-1">
                    <a>电子书&nbsp;</a><a>网络文学&nbsp;</a><a>阅读器</a><img src="images/right.png">
                </div>
                <div class="mTpl-1">
                    <a>电子书&nbsp;</a><a>网络文学&nbsp;</a><a>阅读器</a><img src="images/right.png">
                </div>
                <div class="mTpl-2">
                    <div class="mTpl-2-1">
                        <a>阅读器</a><img src="images/right.png">
                    </div>
                    <ul class="mTpl-2-2">
                        <li>阅读</li>
                        <li>阅读</li>
                        <li>阅读阅读</li>
                        <li>阅读</li>
                        <li>阅读</li>
                    </ul>
                </div>
                <div class="mTpl-1">
                    <a>电子书&nbsp;</a><a>网络文学&nbsp;</a><a>阅读器</a><img src="images/right.png">
                </div>
                <div class="mTpl-1">
                    <a>电子书&nbsp;</a><a>网络文学&nbsp;</a><a>阅读器</a><img src="images/right.png">
                </div>
                <div class="mTpl-1">
                    <a>电子书&nbsp;</a><a>网络文学&nbsp;</a><a>阅读器</a><img src="images/right.png">
                </div>
                <div class="mTpl-2">
                    <div class="mTpl-2-1">
                        <a>阅读器</a><img src="images/right.png">
                    </div>
                    <ul class="mTpl-2-2">
                        <li>阅读</li>
                        <li>阅读</li>
                        <li>阅读阅读</li>
                        <li>阅读</li>
                        <li>阅读</li>
                    </ul>
                </div>
                <div class="mTpl-2">
                    <div class="mTpl-2-1">
                        <a>阅读器</a><img src="images/right.png">
                    </div>
                    <ul class="mTpl-2-2">
                        <li>阅读</li>
                        <li>阅读</li>
                        <li>阅读阅读</li>
                        <li>阅读</li>
                        <li>阅读</li>
                    </ul>
                </div>
                <div class="mTpl-2">
                    <div class="mTpl-2-1">
                        <a>阅读器</a><img src="images/right.png">
                    </div>
                    <ul class="mTpl-2-2">
                        <li>阅读</li>
                        <li>阅读</li>
                        <li>阅读阅读</li>
                        <li>阅读</li>
                        <li>阅读</li>
                    </ul>
                </div>
               
                
                
            </div>
        </div>
        <!--上半部分中间部分 -->
        <div class="mainTop-inner">
            <div class="mTi-1" id="mTi_1">
                <div class="imgBox" id="imgBox">
                    <img src="images/bw.jpg">
                    <img src="images/dzs.jpg">
                    <img src="images/gdfx.jpg">
                    <img src="images/kxx.jpg">
                    <img src="images/sh.jpg">
                    <img src="images/zxx.jpg">
                </div>
            </div>
            <div class="mTi-1-div" id="mTi_1_div">
                <div class="one">1</div>
                <div>2</div>
                <div>3</div>
                <div>4</div>
                <div>5</div>
                <div>6</div>
            </div>
            <div class="mTi-2">
                <div class="mTi-2-top">
                    <hr>
                </div>
                <div class="mTpl-2-down" id="mTpl_2_down">
                    <div class="bigBox" id="bigBox">
                        <div  class="mTpl-2-down">
                            <ul class="mTpl2down-ul">
                                <li><img src="images/nhxn.jpg"></li>
                                <li><img src="images/nhxn.jpg"></li>
                                <li><img src="images/nhxn.jpg"></li>
                                <li><img src="images/nhxn.jpg"></li>
                                <li><img src="images/nhxn.jpg"></li>
                                <li><img src="images/nhxn.jpg"></li>
                                <li><img src="images/nhxn.jpg"></li>
                                <li><img src="images/nhxn.jpg"></li>
                            </ul>
                        </div>
                        
                        <div  class="mTpl-2-down">
                            <ul class="mTpl2down-ul">
                                <li><img src="images/28508902-1_l_3.jpg"></li>
                                <li><img src="images/28508902-1_l_3.jpg"></li>
                                <li><img src="images/28508902-1_l_3.jpg"></li>
                                <li><img src="images/28508902-1_l_3.jpg"></li>
                                <li><img src="images/28508902-1_l_3.jpg"></li>
                                <li><img src="images/28508902-1_l_3.jpg"></li>
                                <li><img src="images/28508902-1_l_3.jpg"></li>
                                <li><img src="images/28508902-1_l_3.jpg"></li>
                            </ul>
                        </div>
                        <div  class="mTpl-2-down">
                            <ul class="mTpl2down-ul">
                                <li><img src="images/28495147-1_l_3.jpg"></li>
                                <li><img src="images/28495147-1_l_3.jpg"></li>
                                <li><img src="images/28495147-1_l_3.jpg"></li>
                                <li><img src="images/28495147-1_l_3.jpg"></li>
                                <li><img src="images/28495147-1_l_3.jpg"></li>
                                <li><img src="images/28495147-1_l_3.jpg"></li>
                                <li><img src="images/28495147-1_l_3.jpg"></li>
                                <li><img src="images/28495147-1_l_3.jpg"></li>
                            </ul>
                        </div>
                    
                    </div>
                    <div class="mTpl2down-img-1" id="btnRight"><img src="images/right.png"></div>
                    <div class="mTpl2down-img-2" id="btnLeft"><img src="images/left.png"></div>
                    <div class="bootns" id="bootns">
                        <div id="d1"></div>
                        <div></div>
                        <div></div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 上半部分的右侧 -->
        <div class="mainTop-right">
            <div class="mTpr-1">
                <h4>最新动态</h4>
                <ul class="mTpr-1-ul">
                    <li>.各种图书活动，满减</li>
                    <li>.各种图书活动，满减</li>
                    <li>.各种图书活动，满减</li>
                </ul>
            </div>
            <div class="mTpr-2">
                <h4> 新书预售</h4>
                <img src="images/28517265-1_f_3.jpg">
            </div>
            <div class="mTpr-3">
                <img src="images/flower.png">
                <h4>新书热卖榜</h4>
            </div>
            <div class="mTpr-4">
                <ul class="mTpr-4-ul">
                    <li>图书</li>
                    <li>图书</li>
                    <li>图书</li>
                    <li>图书</li>
                    <li>图书</li>
                </ul>
                <div class="mTpr-5">
                    <ul class="mTpr-5-ul">
                        <li>1 小猫日记——幸运女蛇的宠儿</li>
                        <li>2 东方有圣兽：古代文化中的故事</li>
                        <li>3 小猫日记——幸运女蛇的宠儿</li>
                        <li>4 东方有圣兽：古代文化中的故事</li>
                        <li>5 小猫日记——幸运女蛇的宠儿</li>
                        <li>6 东方有圣兽：古代文化中的故事</li>
                        <li>7 小猫日记——幸运女蛇的宠儿</li>
                        <li>8 东方有圣兽：古代文化中的故事</li>
                        <li>9 东方有圣兽：古代文化中的故事</li>
                        <li>10 小猫日记——幸运女蛇的宠儿</li>
                    </ul>
                </div>
            </div>
            
            
            
        </div>
        
    </div>
    <!-- 主体中间部分 --> 
    <div class="mainInner">
        <!-- 主体中间左边的table切换 -->
        <div class="mI-left">
            <div class="mIl-1">
                <div class="mIl-1-img">
                    <img src="images/title_sprite.png">
                </div>
                <ul class="mIl-1-ul">
                    <li>主打</li>
                    <li>童话1</li>
                    <li>童话2</li>
                    <li>文艺</li>
                    <li>小说</li>
                    <li>离职</li>
                    <li>经管</li>
                    <li>生活</li>
                    <li>教育</li>
                    <li>电子书</li>
                    <li>励志</li>
                </ul>
            </div>
            <div class="mIl-2">
                <ul class="mIl-2-ul">
                    <li>
                        <img src="images/27882863-1_l_2.jpg">
                        盗墓笔记看大V哦vnivn
                    </li>
                    <li>
                        <img src="images/27882863-1_l_2.jpg">
                        盗墓笔记看大V哦vnivn
                    </li>
                    <li>
                        <img src="images/27882863-1_l_2.jpg">
                        盗墓笔记看大V哦vnivn
                    </li>
                    <li>
                        <img src="images/27882863-1_l_2.jpg">
                        盗墓笔记看大V哦vnivn
                    </li>
                    <li>
                        <img src="images/27882863-1_l_2.jpg">
                        盗墓笔记看大V哦vnivn
                    </li>
                    <li>
                        <img src="images/27882863-1_l_2.jpg">
                        盗墓笔记看大V哦vnivn
                    </li>
                    <li>
                        <img src="images/27882863-1_l_2.jpg">
                        盗墓笔记看大V哦vnivn
                    </li>
                    <li>
                        <img src="images/27882863-1_l_2.jpg">
                        盗墓笔记看大V哦vnivn
                    </li>
                    <li>
                        <img src="images/27882863-1_l_2.jpg">
                        盗墓笔记看大V哦vnivn
                    </li>
                    <li>
                        <img src="images/27882863-1_l_2.jpg">
                        盗墓笔记看大V哦vnivn
                    </li>
                </ul>
            </div>
        </div> 
        <!-- 主体中间右侧 -->
        <div class="mI-right">
            <div class="mTpr-3">
                <img src="images/flower.png">
                <h4>新书热卖榜</h4>
            </div>
            <div class="mTpr-4">
                <ul class="mTpr-4-ul">
                    <li>图书</li>
                    <li>图书</li>
                    <li>图书</li>
                    <li>图书</li>
                    <li>图书</li>
                </ul>
                <div class="mTpr-5">
                    <ul class="mTpr-5-ul">
                        <li>1 小猫日记——幸运女蛇的宠儿</li>
                        <li>2 东方有圣兽：古代文化中的故事</li>
                        <li>3 小猫日记——幸运女蛇的宠儿</li>
                        <li>4 东方有圣兽：古代文化中的故事</li>
                        <li>5 小猫日记——幸运女蛇的宠儿</li>
                        <li>6 东方有圣兽：古代文化中的故事</li>
                        <li>7 小猫日记——幸运女蛇的宠儿</li>
                        <li>8 东方有圣兽：古代文化中的故事</li>
                        <li>9 东方有圣兽：古代文化中的故事</li>
                        <li>10 小猫日记——幸运女蛇的宠儿</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <!-- 主体下边三个图片 -->
    <div class="mainFoot">
        <div class="mF-inner">
            <ul class="mF-ul">
                <li>
                    <img src="images/gdfx.jpg"> 
                </li>
                <li>
                    <img src="images/gsx.jpg">
                </li>
                <li>
                    <img src="images/gsx2.jpg">
                </li>
            </ul>
        </div>
    <div class="aaa">
    </div>
   
    <!-- 底部 -->
    <div class="foot">
        <div class="foot-top">
            <div class="ft-1">
                <div class="ft-1-1"></div>
                <div class="ft-1-2"></div>
                <div class="ft-1-3"></div>
                <div class="ft-1-4"></div>
            </div>
        </div>
        <!-- 底部中间部分 -->
        <div class="foot-inner">
            <div class="fi-1">
                <ul class="fi-ul">
                    <li><h4>购物指南</h4>
                        购物流程<br>
                        购物流程<br>
                        购物流程<br>
                        购物流程
                    </li>
                    <li><h4>购物指南</h4>
                        购物流程<br>
                        购物流程<br>
                        购物流程<br>
                        购物流程
                    </li>
                    <li><h4>购物指南</h4>
                        购物流程<br>
                        购物流程<br>
                        购物流程<br>
                        购物流程
                    </li>
                    <li><h4>购物指南</h4>
                        购物流程<br>
                        购物流程<br>
                        购物流程<br>
                        购物流程
                    </li>
                    <li><h4>购物指南</h4>
                        购物流程<br>
                        购物流程<br>
                        购物流程<br>
                        购物流程
                    </li>
                    <li><h4>购物指南</h4>
                        购物流程<br>
                        购物流程<br>
                        购物流程<br>
                        购物流程
                    </li>
                </ul>
            </div>
        </div>
        <!-- 底部最下面 -->
        <div class="foot-down">
            <div class="fd-1">
                <ul>
                    <li>公司简介</li>
                    <li>|</li>
                    <li>招聘人才</li>
                    <li>|</li>
                    <li>网络梁萌</li>
                    <li>|</li>
                    <li>公司简介</li>
                    <li>|</li>
                    <li>招聘人才</li>
                    <li>|</li>
                    <li>网络梁萌</li>
                    <li>公司简介</li>
                    <li>|</li>
                    <li>招聘人才</li>
                    <li>|</li>
                    <li>网络梁萌</li>
                </ul>
            </div>
             <div class="fd-2">
                 <div class="fd-2-1">
                      mcmokdconvoinoinom<img src="images/jh.gif">cfvynmui,i,imbntnymymy
                 </div>
                
             </div>
        </div>
       

    </div>
  

</body>
<script src="js/area.js"></script>
<script src="js/lbt.js"></script>
<script src="js/returntop.js"></script>
<script src="js/lbt2.js"></script>
</html>